import React, { Component } from 'react'
import styled from 'styled-components'

// console.log(styled, 'styled')

// css in js方案

const BoxContainer = styled.div`
  width: 1rem;
  height: 1rem;
  background: ${(props) => props.bgColor};
  border-radius: ${(props) => (props.round ? '50%' : '')};

  .main {
    width: 1rem;
    height: 2rem;
    background: lightcoral;
  }
  .footer {
  }
`

export default class index extends Component {
  state = {
    color: 'red',
    round: false,
  }
  render() {
    const { color, round } = this.state
    return (
      <BoxContainer round={round} bgColor={color} className="box">
        index
        <header className="header">toubu </header>
        <main className="main">main </main>
        <footer className="footer">footer </footer>
      </BoxContainer>
    )
  }
}
